<script setup>
/*
  个人信息设置页面
*/
import { useUserStore } from '@/store/user.js'
import { storeToRefs } from 'pinia'
import { apiSetInfo } from "@/api/user.js";
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const params = userInfo.value

//修改头像
const handleImageSelect = (files) => {
  // 1. 获取原始图片临时路径
  const originalTempPath = files.tempFilePaths[0];
  if (!originalTempPath) {
    console.error('未获取到图片路径');
    return;
  }

  // 2. 压缩图片（质量50%）
  uni.compressImage({
    src: originalTempPath, // 原始图片路径
    quality: 50, // 压缩质量（0-100，这里设为50%）
    success: (compressRes) => {
      // 3. 压缩成功后，获取压缩后的临时路径
      const compressedTempPath = compressRes.tempFilePath;
      if (!compressedTempPath) {
        console.error('图片压缩失败，未获取到压缩后路径');
        return;
      }

      // 4. 使用压缩后的路径上传
      uploadCompressedImage(compressedTempPath);
    },
    fail: (err) => {
      console.error('图片压缩失败', err);
      uni.showToast({ title: '图片压缩失败', icon: 'none' });
    }
  });
};
// 封装上传逻辑（使用压缩后的图片路径）
const uploadCompressedImage = (compressedTempPath) => {
  uni.uploadFile({
    url: 'http://8.146.206.32:8080/image/upload',
    filePath: compressedTempPath, // 压缩后的路径
    name: 'image',
    formData: {
      fileName: Date.now() + '.png',
      fileType: 'avatar'
    },
    success: (uploadRes) => {
      console.log('上传成功', JSON.parse(uploadRes.data).data);
      userInfo.value.avatar = JSON.parse(uploadRes.data).data;
      uni.showToast({ title: '上传成功', icon: 'success' });
    },
    fail: (err) => {
      console.error('上传失败', err);
      uni.showToast({ title: '上传失败，请重试', icon: 'none' });
    }
  });
};
// 选择图片失败处理
const handleSelectError = (err) => {
  console.error('选择图片失败', err);
  uni.showToast({ title: '选择图片失败', icon: 'none' });
};


//提交修改
const submit = async () => {
  console.log('submit', params);
  await apiSetInfo(params)
  uni.showToast({
    title: '修改成功'
  })
}

</script>

<template>
  <view class="setInfo-container">
    <form @submit="submit" @reset="">
      <view class="avatar">
        <image :src="userInfo.avatar" mode="aspectFill" />
        <!-- 替换掉 picker 默认 UI，外层按钮触发 file-picker -->
        <view class="avatar-btn" @click="$refs.avatarPicker.choose()">
          修改头像
        </view>
        <view style="display: none;">
          <uni-file-picker ref="avatarPicker" limit="1" @select="handleImageSelect" @error="handleSelectError"
          style="display: none;"></uni-file-picker>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">用户名</view>
        <view>
          <input name="nickName" type="text" v-model="params.nickName" />
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">学校</view>
        <view>
          <input name="school" type="text" v-model="params.school" />
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">省份</view>
        <view>
          <input name="povince" type="text" v-model="params.povince" />
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">城市</view>
        <view>
          <input name="city" type="text" v-model="params.city" />
        </view>
      </view>
      <button class="submit" form-type="submit">提交</button>
      <!-- <button form-type="reset">重置</button> -->
    </form>

  </view>
</template>

<style lang="scss">
.setInfo-container {
  padding: 24rpx 32rpx;
  background: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;

  form {
    display: flex;
    flex-direction: column;
    gap:0rpx;
  }

  /* 头像部分 */
  .avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rpx;
    // padding: 40rpx 0;

    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      background: #eee;
    }
    .avatar-btn {
      color: #666;
      border: 2rpx solid #ccc;
      padding: 10rpx;
      border-radius: 5rpx;
    }
    .cover-picker {
      font-size: 28rpx;
      color: #3273ff;
    }
  }

  /* 表单项 */
  .uni-form-item {
    // background: #fff;
    border-radius: 16rpx;
    padding: 18rpx 28rpx;
    // box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }

    input {
      font-size: 28rpx;
      padding: 18rpx 20rpx;
      border-radius: 10rpx;
      background: #f4f4f4;
      border: 1rpx solid #ddd;
      outline: none;

      &:focus {
        border-color: #3273ff;
        background: #fff;
      }
    }
  }

  /* 提交/重置按钮 */
  button {
    margin-top: 10rpx;
    // height: 88rpx;
    line-height: 88rpx;
    border-radius: 16rpx;
    font-size: 30rpx;
    font-weight: 600;
    width: 250rpx;
    &[form-type="submit"] {
      // background: #3273ff;
      border: 2rpx solid #ccc;
      color: #333;
    }
  }
}

</style>